<script setup lang="ts">
  import { ref, onMounted, getCurrentInstance, watch, toRaw } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import Demo from './components/Demo/index.vue'

  defineProps<{ msg: string }>();
  const count = ref(0);

  setTimeout(() => {
    count.value = 30;
  }, 3000);

  const route = useRoute();

  watch(route, (newValue, oldValue) => {
    console.log(33333222, toRaw(toRaw(newValue).params.value), useRouter())
  });
  
  watch(count, (newValue, oldValue) => {
    console.log(newValue)
  });

  function addCount () {
    count.value ++
  }

  onMounted(() => {
    const internalInstance = getCurrentInstance() as any;
    const nav = internalInstance?.appContext.config.globalProperties.$nav;
    nav('Common.list', {
      id: '99'
    });
  })
</script>

<template>
  <p @click="addCount">231</p>
  {{count}}
  <Demo :msg="'3222'"></Demo>
  <router-view></router-view>
</template>

<style scoped>
  a {
    color: #42b983;
  }

  label {
    margin: 0 0.5em;
    font-weight: bold;
  }

  code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 4px;
    color: #304455;
  }
</style>
